/**
 * 装车数据
 * @author lijj
 */

import { message } from "antd";
import { EChartsOption } from "echarts";
import { useCallback, useEffect, useRef, useState } from "react";
import * as echarts from 'echarts';
import { ILoadedAnalyse } from "../../../../../type/workBench";
import { getReportLoadData, getReportLoadedAnalyse } from "../../api";

const ZhuangcheData = () => {
    const echartsBox = useRef<HTMLDivElement>(null);
    let echartsClass = useRef<echarts.ECharts>()
    const [datalist, setDataList] = useState<ILoadedAnalyse[]>([])
    const [countlist, setCountList] = useState<{entryCar:number,loadCar:number,outputCar:number,overCar:number}>()

    const listFun = useCallback(async () => {
        const { code, msg, data } = await getReportLoadedAnalyse() as { code: number, msg: string, data: ILoadedAnalyse[] };
        if (code === 20000) {
            setDataList(data)
        } else {
            message.error(msg);
        }
    }, [])
    //getReportLoadData
    const countFun = useCallback(async () => {
            const { code, msg, data } = await getReportLoadData() as { 
                code: number, msg: string,
                data: { entryCar: number, loadCar: number, outputCar: number, overCar: number } 
            };
            if (code === 20000) {
                setCountList(data)
            } else {
                message.error(msg);
            }
        }, [])
    useEffect(() => {
        listFun()
        countFun()
    }, [listFun,countFun])

    useEffect(() => {
        const resizeListener = () => {
            echartsClass.current?.resize()
        }
        resizeListener()
        window.addEventListener('resize', resizeListener);

        return () => {
            window.removeEventListener('resize', resizeListener);
        }
    }, [])

    useEffect(() => {
        // 初始化echarts
        setTimeout(() => {
            if (echartsBox) {
                var echarts_box_html = document.getElementById('echarts_tree')!;
                echartsClass.current = echarts.init(echarts_box_html);
                ; (async () => {
                    if (datalist?.length > 0) {
                        const XAxis = datalist.map(item => item.goodName);
                        const YAxis = datalist.map(item => item.goodNum);
                        var option: EChartsOption = {
                            grid: {
                                top: 10,  // 增加上边距，让柱子有更多的空间显示
                                bottom: 30,  // 增加下边距，避免柱子被遮挡
                                left: 50,  // 左边距
                                right: 50  // 右边距
                            },
                            xAxis:{
                                type: 'category',
                                data: XAxis
                            },
                            yAxis: {
                                type: 'value',
                            },
                            series: [
                                {
                                    data: YAxis,
                                    type: 'bar',
                                    barWidth: '18%',
                                    itemStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                            { offset: 0, color: '#0163EE' },  // 渐变的起始颜色559CF6
                                            { offset: 1, color: '#559CF6' }   // 渐变的结束颜色
                                        ])
                                    }
                                }
                            ]
                        };
                        option && echartsClass.current!.setOption(option);
                    }
                }
                )()
            }
        },10)
    }, [datalist])

    return (
        <div className="zhuangche">
            <div className="zhuangche-left">
                <div className="left-title">装车数据</div>
                <div className="left-content">
                    <div className="left-item">
                        <div className="item-title">待入矿数</div>
                        <div className="item-value">{countlist?.entryCar}
                            <span>辆</span>
                        </div>
                    </div>
                    <div className="left-item">
                        <div className="item-title">待出矿数</div>
                        <div className="item-value">{countlist?.outputCar}
                            <span>辆</span>
                        </div>
                    </div>
                    <div className="left-item">
                        <div className="item-title">待装车数</div>
                        <div className="item-value">{countlist?.loadCar}
                            <span>辆</span>
                        </div>
                    </div>
                    <div className="left-item">
                        <div className="item-title">待过毛重数</div>
                        <div className="item-value">{countlist?.overCar}
                            <span>辆</span>
                        </div>
                    </div>
                </div>
            </div>
            <div className="zhuangche-right">
                <div className="right-top">
                    <div className="right-title">今日待装车品类分析</div>
                    <div className="right-content">
                        <div>待装车数</div>
                        <div>{countlist?.loadCar}
                            <span>辆</span>
                        </div>
                    </div>
                </div>
                <div className="right-ehcarts">
                <div id="echarts_tree" style={{
                    width: '100%',
                    height: '23rem',
                    backgroundColor: '#fff',
                }} ref={echartsBox}></div>
                </div>
            </div>
        </div>
    )
}   

export default ZhuangcheData